<template>
  <el-dialog
    v-model="mapDialog"
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    v-model:visible="visible"
    class="rv-dialog rv-dialog_center"
    lock-scroll
    width="74%"
  >
    <el-row :gutter="15" class="">
      <el-col :span="8">
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          size="small"
          label-width="70px"
          label-position="right"
          :disabled="!!isDetail"
        >
          <el-col :span="24">
            <el-form-item label="名称" prop="kqName">
              <el-input
                v-model="dataForm.kqName"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- ... 其他 form-item ... -->

          <el-col :span="24">
            <el-form-item label="单位" prop="kqWorkUnit">
              <el-input
                v-model="dataForm.kqWorkUnit"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- ... 其他 form-item ... -->
        </el-form>
      </el-col>
      <el-col :span="16">
        <div style="width: 100%">
          <div class="search_box">
            <div class="label">关键字搜索</div>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              id="tipinput"
            ></el-input>
          </div>
          <div ref="gaode_Map" id="gaode_Map"></div>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  securityJsCode: 'bb943e8f6f8d5a41151ef09f54fb3450',
}
const mapDialog = ref(true)
const visible = ref(false)
const isDetail = ref(false)
const dataForm = reactive({
  kqName: undefined,
  kqLocation: undefined,
  kqLongitude: undefined,
  kqLatitude: undefined,
  kqWorkUnit: undefined,
  cronkqAccredit: [],
  kqValidCardRange: undefined,
})
const rules = ref({})
const input = ref('')
const map = ref(null)
const auto = ref(null)
const placeSearch = ref(null)
const lnglat = ref([])
const markers = ref([])
const position = ref({})

onMounted(() => {
  initMap()
})

const dataFormSubmit = () => {
  console.log('我被点击了')
}

const initMap = () => {
  let centerLen = [116.397428, 39.90923]
  AMapLoader.load({
    key: '0b7bf0ed4f11138117e70942cceb067c',
    version: '2.0',
    plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],
  })
    .then(AMap => {
      console.log('map:' + AMap)
      map.value = new AMap.Map('gaode_Map', {
        viewMode: '3D',
        zoom: 18,
        center: centerLen,
        resizeEnable: true,
      })
      console.log('map:' + map.value)
      setMarker(centerLen)
      searchMap()
      map.value.on('click', clickMapHandler)
    })
    .catch(e => {})
}

const searchMap = () => {
  auto.value = new Window.AMap.AutoComplete({
    input: 'tipinput',
  })
  placeSearch.value = new map.value.PlaceSearch({
    map: map.value,
  })
  auto.value.on('select', selectSite)
}

const selectSite = e => {
  if (e.poi.location) {
    placeSearch.value.setCity(e.poi.adcode)
    placeSearch.value.search(e.poi.name)
    let geocoder = new Window.AMap.Geocoder({})
    let that = this
    geocoder.getAddress(lnglat.value, function(status, result) {
      if (status === 'complete' && result.regeocode) {
        that.province = result.regeocode.addressComponent.province
        that.city = result.regeocode.addressComponent.city
        that.$set(dataForm, 'province', that.province)
        that.$set(dataForm, 'city', that.city)
        that.$set(dataForm, 'address', e.poi.name)
        that.$set(
          dataForm,
          'coordinate',
          e.poi.location.lng + ',' + e.poi.location.lat
        )
      } else {
      }
    })
  } else {
    this.$message.error('查询地址失败，请重新输入地址')
  }
}

const clickMapHandler = e => {
  dataForm.kqLongitude = e.lnglat.getLng()
  dataForm.kqLatitude = e.lnglat.getLat()
  lnglat.value = [e.lnglat.getLng(), e.lnglat.getLat()]
  setMarker(lnglat.value)
  let geocoder = new Window.AMap.Geocoder({})
  let that = this
  geocoder.getAddress(lnglat.value, function(status, result) {
    if (status === 'complete' && result.regeocode) {
      dataForm.kqLocation = result.regeocode.formattedAddress
    }
  })
  position.value = {
    longitude: e.lnglat.getLng(),
    latitude: e.lnglat.getLat(),
    address: that.address,
  }
  input.value = that.address
}

const setMarker = lnglat => {
  removeMarker()
  let marker = new Window.AMap.Marker({
    position: lnglat,
  })
  marker.setMap(map.value)
  markers.value.push(marker)
}

const removeMarker = () => {
  if (markers.value) {
    map.value.remove(markers.value)
  }
}
</script>

<style lang="scss">
/* ... 样式不变 ... */
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
.el-table__body tr:hover > td {
  background-color: #d7eff6 !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
table {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
table th {
  height: 40px;
  line-height: 40px;
}
</style>
